<template>
  <div>
    <h1>表单事件的修饰符</h1>
    <!-- .num  .trim .lazy -->
    <!-- .number作用将v-model绑定值转换number(前提得触发一下)
    只有第一个字符是数字，否则不会转换数据类型
     -->
    <input type="text" v-model.number="num" />
    <h1>{{ typeof num }}</h1>
    <!-- .trim 首尾空格 -->
    <input type="text" v-model.trim="info" />
    <!-- .lazy当输入框失去焦点后进行数据更新 -->
    <input type="text" v-model.lazy="msg" />
    <!-- 
        原理：
        oninput事件  元素的值发生改变就会立即触发
        onchange事件  元素的值发生改变并失去焦点后触发


    

     -->
    <h1>{{ msg }}</h1>

    <button @click="getNum">获取它的值</button>
    <!-- 按键修饰符以后那些 -->
    <input type="text" @keyup.13="hanhan" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "0",
      info: "涵涵修过道吗？",
      msg: "",
    };
  },
  methods: {
    getNum() {
      console.log(typeof this.num);
      console.log(this.info);
    },
    hanhan() {
      console.log("我是元婴期");
    },
  },
};
</script>

<style lang="less" scoped>
</style>